<template>
	<div class="waikuang">
	<swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide v-for="item in SwiperList" :key='item.id'><img class='swiper-img' :src="item.imgUrl" alt=""></swiper-slide>
    
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
	</div>
</template>

<script>
export default {
	name:"HomeSwiper",
	props:{
		SwiperList:Array
	},
	data() {
		return {
			swiperOptions:{
				pagination:'.swiper-pagination',
				loop:true
			},
			

		}
	},
}
</script>

<style lang="">
.waikuang>>>.swiper-pagination-bullet-active{
	background: blue;
}
.waikuang{
	width:100%;
	height:0;
	overflow: hidden;
	padding-bottom:31.25%;
	background: #fff;

}
.swiper-img{
	width:100%
}	
</style>